<script setup lang="ts">
/*导入按钮操作*/
import { downloadTemplate } from '@/api/exam/template';
import { RepoVO } from '@/api/exam/repo/types';
import { globalHeaders } from '@/utils/request';

const currentQuestionSetId = ref();
const props = defineProps({
  importDialog: {
    type: Object,
    default: {
      visible: false,
      title: ''
    }
  }
});
const emit = defineEmits(['update:importDialog', 'update:data']);
const handleClose = (value: boolean) => {
  emit('update:importDialog', value);
};
const handleImport = (row: RepoVO) => {
  currentQuestionSetId.value = row.repoId;
  upload.title = '试题导入';
  upload.open = true;
};

/*** 试题导入参数 */
const upload = reactive<ImportOption>({
  // 是否显示弹出层
  open: false,
  // 弹出层标题
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: globalHeaders(),
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + '/exam/template/importEdit'
});
/**文件上传中处理 */
const handleFileUploadProgress = () => {
  upload.isUploading = true;
};
const uploadRef = ref<ElUploadInstance>();
/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: UploadFile) => {
  upload.open = false;
  upload.isUploading = false;
  uploadRef.value?.handleRemove(file);
  if (response.code === 200) {
    props.importDialog.visible = false;
    emit('update:data', response.data);
    emit('update:importDialog', false);
  }
};
import saveAs from 'file-saver';

/** 下载模板操作 */
const importTemplate = () => {
  const res = downloadTemplate('题库导入模板');
  res.then(blob => {
    // 使用 FileSaver.js 提供的 saveAs 函数来下载文件
    saveAs(blob, `题目导入模板_${new Date().getTime()}.xlsx`);
  });
};

/** 提交上传文件 */
function submitFileForm() {
  uploadRef.value?.submit();
}

</script>

<template>
  <!-- 试题导入对话框 -->
  <el-dialog v-model="props.importDialog.visible" :title="props.importDialog.title" append-to-body width="800px"
             @update:model-value="handleClose">
    <a-alert type="info" closable show-icon message="你可以将Excel数据直接导入系统" class="mb-2" />
    <a-steps direction="vertical">
      <a-step title="按照模板格式填写需要导入的题目" status="wait">
        <template #description>
          <a-button @click="importTemplate()">
            <template #icon>
              <svg-icon icon-class="import" class="mr-2" />
            </template>
            下载 Excel 模板
          </a-button>
        </template>
      </a-step>
      <a-step title="上传补充后的 Excel 文件" status="wait">
        <template #description>
          <el-upload
            ref="uploadRef"
            :action="upload.url + '?updateSupport=' + upload.updateSupport + '&questionSetId=' + currentQuestionSetId"
            :auto-upload="false"
            :disabled="upload.isUploading"
            :headers="upload.headers"
            :limit="1"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            accept=".xlsx, .xls"
            drag
          >
            <el-icon class="el-icon--upload">
              <i-ep-upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </template>
      </a-step>
    </a-steps>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="props.importDialog.visible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
